<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<web-view style="background-color: #fafafa;" class="webview" ref="webview" :fullscreen="false"
					@onPostMessage="getMessage" src="/hybrid/html/maps/onTheRoad.html"></web-view>
				<!-- <cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image> -->
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.Takingataxi.zzqwmdd }}
					</view>
					<view class="wait-data">
						<!-- {{ language.Takingataxi.waitData1 }}<text class="time">21：29</text>{{ language.Takingataxi.waitData2 }} -->
					</view>
				</view>

				<!-- 司机信息 -->
				<view class="driver-info">
					<view class="profile-photo mr10">
						<u-avatar :src="driverInfo.headPortrait" size="44"></u-avatar>
					</view>
					<view class="driver-name mr10">{{ driverInfo.name }}师傅</view>
					<view class="license-plate mr10">{{ driverInfo.licensePlateNum }}</view>
					<view class="taxi-type">快车</view>
					<a :href="`tel:${ driverInfo.mobile }`" class="contact-driver">
						<u-icon name="kefu-ermai"></u-icon>
					</a>
				</view>

				<!-- 帮助 -->
				<view class="other-use">
					<view class="other-use-item" @click="handleOperation(item)" v-for="item in otherUseList"
						:key="item.id">
						<u-icon :name="item.icon" size="12"></u-icon>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>

				<view class="imagediv">
					<u-swiper
						height="80"
						radius="67"
						circular
						:list="bannerList"
						keyName="picture"
					>
					</u-swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as driverApi from '@/api/driver.js'
	import GoogleMap from "@/mixins/GoogleMap";
	export default {
		mixins: [GoogleMap],
		data() {
			return {
				language: {},
				driverInfo: {},
				orderInfo: {},
				orderId: '',
				wv: null,
				intervalId: 0,
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/path.png'),
						name: '路线选择',
					},
					{
						id: 2,
						icon: require('@/static/image/share.png'),
						name: '行程分享',
					},
					{
						id: 3,
						icon: require('@/static/image/cancel.png'),
						name: '取消订单',
					}
				],
				bannerList: [],
			}
		},
		onShow: function() {
			this.getBannerList()
			this.setHeight()
			this.getlanguagedata();
		},
		onLoad(option) {
			if (!option.id) {
				this.navigateBack()
			}
			this.orderId = option.id
			this.driverId = option.driverId
			console.log(this.driverId)
			this.getDriverInfo(this.driverId)
			// this.intervalId = setInterval(this.getOrderInfo, 5000)

			setTimeout(() => {
				this.getOrderInfo()
			}, 1500)
			// 模拟行程结束
			// setTimeout(() => {
			// 	try {
			// 		uni.showLoading({
			// 			title: 'loading...'
			// 		});
			// 		driverApi.cancelOrder({
			// 			orderId: this.orderId,
			// 			orderStatus: 2,
			// 		}).then(res => {
			// 			if (res.code === 0) {
			// 				uni.redirectTo({
			// 					url: "/pages/Home/Takingataxi/theEnd?id=" + this.orderId,
			// 				});
			// 			}
			// 			uni.hideLoading();
			// 		})
			// 	} catch (error) {
			// 		console.log(error)
			// 		uni.hideLoading();
			// 	}
			// },5000)
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			async getBannerList() {
					try{
						const res = await driverApi.getBannerList({
							pageNo: 1,
							pageSize: 100,
							status: 0,
							name: 2
						})
						if(res.code === 0) {
							this.bannerList = res.data
						}
					}catch(e){
						console.log(e,666)
					}
			},
			// 设置高度
			setHeight() {
				// 设置 iframe 高度和发送消息
				// #ifdef APP-PLUS
				let currentWebview = this.$scope.$getAppWebview();
				let boxHeight = 0
				uni.getSystemInfo({
					success: res => boxHeight = res.windowHeight // 屏幕可用高度
				})
				setTimeout(() => {
					this.wv = currentWebview.children()[0];
					this.wv.setStyle({
						top: 0,
						height: 342,
						background: 'transparent',
						zindex: 1
					})
				}, 1000)
				// #endif
			},
			getMessage(res) {
				const data = (res.detail.data && res.detail.data[0]) || {};
				switch (data.action) {
					case 'initPosition':
						break;
				}
			},
			async getOrderInfo() {
				try {
					uni.showLoading({
						title: 'loading...'
					});
					const res = await driverApi.getTaxiOrder({
						id: this.orderId
					});
					console.log(JSON.stringify(res), 'orderInfo')
					if (res.code === 0) {
						if (Number(res.data.orderStatus) === 2) {
							// 已结束
							this.intervalId && clearInterval(this.intervalId)
							uni.navigateTo({
								url: `/pages/Home/Takingataxi/feeDetails?id=${this.orderId}`,
							});
						} else {
							// 起点为当前位置或司机位置
							const startLatLng = {
								latitude: parseFloat(res.data.startLatitude),
								longitude: parseFloat(res.data.startLongitude)
							};
							//  终点位置
							const endLatLng = {
								latitude: parseFloat(res.data.endLatitude),
								longitude: parseFloat(res.data.endLongitude)
							};
							console.log(res.data.cost, 'res.data.cost')
							this.wv?.evalJS(
								`cost = ${JSON.stringify(res.data.cost)};initMap2(${JSON.stringify(startLatLng)}, ${JSON.stringify(endLatLng)})`
							);
							this.goTheEnd()
						}
					}
					uni.hideLoading();
				} catch (e) {
					console.log(e);
					uni.hideLoading();
				}
			},
			async getDriverInfo(id) {
				const res = await driverApi.getDriverInfo({
					id
				})
				if (res.code === 0) {
					this.driverInfo = res.data
				}
			},

			goTheEnd() {
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/Home/Takingataxi/theEnd?id=${this.orderId}&driverId=${this.driverId}`,
					});
				}, 3000)
			},

			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			returns() {
				uni.navigateTo({
					// todo
					url: "/pages/Home/Takingataxi/index",
					// url: "/pages/Home/Takingataxi/TakingataxiNow",
				});
			},
			handleOperation(item) {
				if (item.id === 3) {
					try {
						uni.showLoading({
							title: 'loading...'
						});
						driverApi.cancelOrder({
							orderId: this.orderId,
							orderStatus: 3,
						}).then(res => {
							if (res.code === 0) {
								uni.redirectTo({
									url: "/pages/Home/Takingataxi/cancelOrder?orderId=" + this.orderId,
								});
							}
							uni.hideLoading();
						})
					} catch (error) {
						console.log(error)
						uni.hideLoading();
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;

		.headdiv {
			position: relative;
			width: 100%;
			height: 682rpx;
			overflow: hidden;

			.map {
				// 隐藏选中时的div边框
				width: calc(100% + 4px);
				height: calc(100% + 4px);
				outline: none;
				margin: -2px 0 0 -2px;
			}

			.back {
				position: absolute;
				top: 100rpx;
				left: 32rpx;
				z-index: 99;
				font-size: 34rpx;
			}
		}

		.bodydiv {
			// margin-top: -20rpx;
			padding: 48rpx 32rpx;
			width: 100%;
			height: calc(100vh - 682rpx);
			border-radius: 20px 20px 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
			overflow-y: auto;

			// 订单信息
			.order-info {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}

				.wait-data {
					font-size: 20rpx;
					line-height: 28rpx;
					color: rgba(153, 153, 153, 1);
				}
			}

			// 司机信息
			.driver-info {
				position: relative;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 40rpx;

				.profile-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.taxi-type {
					width: 56rpx;
					height: 28rpx;
					text-align: center;
					line-height: 28rpx;
					border-radius: 2px;
					background: linear-gradient(135deg, rgb(255, 141, 26) 0%, rgb(255, 82, 82) 100%);
					color: #fff;
					font-size: 20rpx;
				}

				.contact-driver {
					position: absolute;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-decoration: none;
					border-radius: 50%;
					background: rgb(255, 255, 255);
					box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
				}
			}

			.mr10 {
				margin-right: 20rpx;
			}

			// 其他操作
			.other-use {
				display: flex;
				justify-content: space-between;

				.other-use-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 120rpx;
					border-radius: 8rpx;
					background: rgb(255, 255, 255);
					box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

					.name {
						margin-top: 8rpx;
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						line-height: 32rpx;
					}
				}
			}

			.imagediv {
				margin-top: 16px;
			}
		}
	}
</style>